import React, { useState, useEffect } from 'react';
import { toast } from '@/lib/toast-with-audio';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend, LineChart, Line } from 'recharts';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';
import { bugApi } from '@/store/bug';
import type { Bug, GetBugsParams } from '@/types/bug';

// 使用导入的Bug类型，不再需要本地定义

// 缺陷状态分布数据（图表数据，保留）
const statusDistributionData = [
  { name: '待处理', value: 45, color: '#9ca3af' },
  { name: '处理中', value: 30, color: '#3b82f6' },
  { name: '已修复', value: 20, color: '#10b981' },
  { name: '已关闭', value: 15, color: '#6b7280' },
  { name: '已拒绝', value: 10, color: '#ef4444' },
];

// 缺陷类型分布数据（图表数据，保留）
const typeDistributionData = [
  { name: '功能缺陷', value: 40, color: '#3b82f6' },
  { name: '性能缺陷', value: 15, color: '#10b981' },
  { name: '界面缺陷', value: 12, color: '#f59e0b' },
  { name: '兼容性缺陷', value: 8, color: '#8b5cf6' },
  { name: '安全缺陷', value: 10, color: '#ef4444' },
  { name: '逻辑缺陷', value: 15, color: '#6366f1' },
];

// 缺陷趋势数据（图表数据，保留）
const bugTrendData = [
  { date: '2/26', 新增: 8, 修复: 6 },
  { date: '2/27', 新增: 10, 修复: 8 },
  { date: '2/28', 新增: 12, 修复: 10 },
  { date: '2/29', 新增: 8, 修复: 9 },
  { date: '3/1', 新增: 10, 修复: 7 },
  { date: '3/2', 新增: 12, 修复: 11 },
  { date: '3/3', 新增: 10, 修复: 9 },
];

// 模块分布数据（图表数据，保留）
const moduleDistributionData = [
  { name: '前端', value: 35, color: '#3b82f6' },
  { name: '后端', value: 45, color: '#10b981' },
  { name: '数据库', value: 10, color: '#f59e0b' },
  { name: 'UI/UX', value: 5, color: '#8b5cf6' },
  { name: '基础设施', value: 5, color: '#6b7280' },
];

// 状态徽章组件
const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
  const statusMap: Record<string, { bg: string, text: string }> = {
    '待处理': { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-700 dark:text-gray-300' },
    '处理中': { bg: 'bg-blue-100 dark:bg-blue-900', text: 'text-blue-700 dark:text-blue-300' },
    '已修复': { bg: 'bg-green-100 dark:bg-green-900', text: 'text-green-700 dark:text-green-300' },
    '已关闭': { bg: 'bg-gray-200 dark:bg-gray-600', text: 'text-gray-700 dark:text-gray-300' },
    '已拒绝': { bg: 'bg-red-100 dark:bg-red-900', text: 'text-red-700 dark:text-red-300' },
  };
  
  const style = statusMap[status] || { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-700 dark:text-gray-300' };
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}>
      {status}
    </span>
  );
};

// 优先级标签组件
const PriorityTag: React.FC<{ priority: string }> = ({ priority }) => {
  const priorityMap: Record<string, { bg: string, text: string }> = {
    '高': { bg: 'bg-red-100 dark:bg-red-900', text: 'text-red-700 dark:text-red-300' },
    '中': { bg: 'bg-amber-100 dark:bg-amber-900', text: 'text-amber-700 dark:text-amber-300' },
    '低': { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-700 dark:text-gray-300' },
  };
  
  const style = priorityMap[priority] || { bg: 'bg-gray-100 dark:bg-gray-700', text: 'text-gray-700 dark:text-gray-300' };
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}>
      {priority}
    </span>
  );
};

// 严重程度标签组件
const SeverityTag: React.FC<{ severity: string }> = ({ severity }) => {
  const severityMap: Record<string, { bg: string, text: string }> = {
    '严重': { bg: 'bg-red-100', text: 'text-red-700' },
    '中等': { bg: 'bg-amber-100', text: 'text-amber-700' },
    '轻微': { bg: 'bg-green-100', text: 'text-green-700' },
  };
  
  const style = severityMap[severity] || { bg: 'bg-gray-100', text: 'text-gray-700' };
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${style.bg} ${style.text}`}>
      {severity}
    </span>
  );
};

// 类型标签组件
const TypeTag: React.FC<{ type: string }> = ({ type }) => {
  return (
    <span className="px-2 py-1 text-xs bg-gray-100 rounded-full text-gray-700">
      {type}
    </span>
  );
};

// 模块标签组件
const ModuleTag: React.FC<{ module: string }> = ({ module }) => {
  return (
    <span className="px-2 py-1 text-xs bg-gray-100 rounded-full text-gray-700">
      {module}
    </span>
  );
};

// 版本标签组件
const VersionTag: React.FC<{ version: string }> = ({ version }) => {
  return (
    <span className="px-2 py-1 text-xs font-mono bg-gray-100 rounded text-gray-800">
      {version}
    </span>
  );
};

// 进度条组件
const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
  let color = '#3b82f6'; // 默认蓝色
  
  if (progress === 0) {
    color = '#d1d5db'; // 灰色表示未开始
  } else if (progress === 100) {
    color = '#10b981'; // 绿色表示已完成
  } else if (progress > 75) {
    color = '#22c55e'; // 浅绿色表示即将完成
  }
  
  return (
    <div className="w-full bg-gray-200 rounded-full h-2">
      <div 
        className="h-2 rounded-full transition-all duration-500 ease-out" 
        style={{ width: `${progress}%`, backgroundColor: color }}
      ></div>
    </div>
  );
};

// 用户头像组件
const UserAvatar: React.FC<{ name: string }> = ({ name }) => {
  if (!name) {
    return (
      <div className="w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-500">
        <i className="fa-solid fa-user"></i>
      </div>
    );
  }
  
  // 从姓名中提取第一个字符
  const initial = name.charAt(0).toUpperCase();
  
  // 为不同的姓氏生成不同的背景色
  const colors = [
    'bg-blue-100 text-blue-600',
    'bg-green-100 text-green-600',
    'bg-purple-100 text-purple-600',
    'bg-amber-100 text-amber-600',
    'bg-pink-100 text-pink-600',
    'bg-indigo-100 text-indigo-600'
  ];
  
  // 简单的哈希函数来选择颜色
  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const colorClass = colors[hash % colors.length];
  
  return (
    <div className={`w-7 h-7 rounded-full ${colorClass} flex items-center justify-center text-xs font-medium`}>
      {initial}
    </div>
  );
};

export default function Bugs() {
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [severityFilter, setSeverityFilter] = useState('all');
  const [moduleFilter, setModuleFilter] = useState('all');
  const [assigneeFilter, setAssigneeFilter] = useState('all');
  const [bugs, setBugs] = useState<Bug[]>([]);
  const [loading, setLoading] = useState(true);
  
  // 从store加载缺陷数据
  useEffect(() => {
    const loadBugs = async () => {
      try {
        setLoading(true);
        const response = await bugApi.getBugs();
        if (response.success) {
          setBugs(response.data);
        } else {
          toast.error(response.message || '获取缺陷列表失败');
        }
      } catch (error) {
        console.error('加载缺陷数据失败:', error);
        toast.error('加载缺陷数据失败');
      } finally {
        setLoading(false);
      }
    };

    loadBugs();
  }, []);
  
  // 获取所有可能的分配人
  const assignees = ['all', ...Array.from(new Set(bugs.map(bug => bug.assignee).filter(Boolean)))];
  
  // 过滤缺陷数据
  const filteredBugs = bugs.filter(bug => {
    const matchesSearch = 
      bug.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
      bug.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (bug.assignee && bug.assignee.toLowerCase().includes(searchTerm.toLowerCase())) ||
      (bug.submitter && bug.submitter.toLowerCase().includes(searchTerm.toLowerCase()));
    
    const matchesStatus = statusFilter === 'all' || bug.status === statusFilter;
    const matchesPriority = priorityFilter === 'all' || bug.priority === priorityFilter;
    const matchesSeverity = severityFilter === 'all' || bug.severity === severityFilter;
    const matchesModule = moduleFilter === 'all' || bug.module === moduleFilter;
    const matchesAssignee = assigneeFilter === 'all' || bug.assignee === assigneeFilter;
    
    return matchesSearch && matchesStatus && matchesPriority && matchesSeverity && matchesModule && matchesAssignee;
  });
  
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      // 搜索逻辑
    }
  };
  
  const handleCreateBug = () => {
    toast('创建新缺陷');
  };
  
  const handleViewBug = (id: number) => {
    toast(`查看缺陷 #${id}`);
  };
  
  const handleEditBug = (id: number) => {
    toast(`编辑缺陷 #${id}`);
  };
  
  const handleDeleteBug = (id: number) => {
    toast(`删除缺陷 #${id}`);
  };
  
  const handleMarkFixed = (id: number) => {
    setBugs(bugs.map(bug => 
      bug.id === id 
        ? { ...bug, status: '已修复', progress: 100 } 
        : bug
    ));
    toast('缺陷已标记为已修复');
  };
  
  return (
    <div>
      <div className="mb-6">
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
        <h1 className="text-2xl font-bold text-gray-800 dark:text-white">缺陷管理</h1>
        <p className="text-gray-600 dark:text-gray-300 mt-1">跟踪和管理项目中的缺陷问题</p>
        </motion.div>
      </div>
      
      {/* 概览卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
              <i className="fa-solid fa-bug h-6 w-6 text-blue-600 dark:text-blue-400"></i>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">总缺陷数</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{bugs.length}</p>
            </div>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-red-100 dark:bg-red-900">
              <i className="fa-solid fa-triangle-exclamation h-6 w-6 text-red-600 dark:text-red-400"></i>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">高优先级</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{bugs.filter(b => b.priority === '高' && b.status !== '已关闭').length}</p>
            </div>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-amber-100 dark:bg-amber-900">
              <i className="fa-solid fa-clock h-6 w-6 text-amber-600 dark:text-amber-400"></i>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">待处理</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{bugs.filter(b => b.status === '待处理').length}</p>
            </div>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div className="flex items-center">
            <div className="p-3 rounded-full bg-green-100 dark:bg-green-900">
              <i className="fa-solid fa-check-circle h-6 w-6 text-green-600 dark:text-green-400"></i>
            </div>
            <div className="ml-4">
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">已修复</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{bugs.filter(b => b.status === '已修复' || b.status === '已关闭').length}</p>
            </div>
          </div>
        </div>
      </div>
      
      {/* 图表区域 */}
      <div className="grid grid-cols-3 gap-6 mb-6">
        {/* 缺陷状态分布 */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">缺陷状态分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={statusDistributionData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={2}
                  dataKey="value"
                  label={({ name, value }) => `${name} ${value}`}
                  labelLine={false}
                >
                  {statusDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip formatter={(value, name) => [`${value}个缺陷`, name]} />
                <Legend verticalAlign="bottom" height={36} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
        
        {/* 缺陷类型分布 */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: 0.1 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">缺陷类型分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={typeDistributionData}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 60, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
                <XAxis type="number" />
                <YAxis type="category" dataKey="name" width={60} />
                <Tooltip formatter={(value, name) => [`${value}个缺陷`, name]} />
                <Bar dataKey="value" radius={[0, 4, 4, 0]}>
                  {typeDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
        
        {/* 缺陷趋势 */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: 0.2 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 col-span-1"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">缺陷趋势</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={bugTrendData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip formatter={(value) => [`${value}个缺陷`, '']} />
                <Legend verticalAlign="top" height={36} />
                <Line type="monotone" dataKey="新增" stroke="#ef4444" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
                <Line type="monotone" dataKey="修复" stroke="#10b981" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
        
        {/* 模块分布 */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 col-span-1"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">模块分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={moduleDistributionData}
                layout="vertical"
                margin={{ top: 5, right: 30, left: 60, bottom: 5 }}
              >
                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
                <XAxis type="number" />
                <YAxis type="category" dataKey="name" width={60} />
                <Tooltip formatter={(value, name) => [`${value}个缺陷`, name]} />
                <Bar dataKey="value" radius={[0, 4, 4, 0]}>
                  {moduleDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </motion.div>
        
        {/* 高优先级缺陷列表 */}
      <motion.div 
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.3, delay: 0.4 }}
        className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 col-span-2"
      >
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">高优先级缺陷</h2>
          <button className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center">
            查看全部
            <i className="fa-solid fa-chevron-right ml-1 text-xs"></i>
          </button>
        </div>
        
        <div className="space-y-3">
          {bugs
            .filter(bug => bug.priority === '高' && bug.status !== '已关闭')
            .slice(0, 4)
            .map(bug => (
              <motion.div 
                key={bug.id}
                whileHover={{ x: 5 }}
                className="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
              >
                <div className="flex-shrink-0 mr-3">
                  <div className="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
                    <i className="fa-solid fa-bug text-xl"></i>
                  </div>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex justify-between items-start">
                    <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{bug.title}</h4>
                    <span className="text-xs font-mono text-gray-500 dark:text-gray-400 ml-2 whitespace-nowrap">{bug.code}</span>
                  </div>
                  <div className="flex items-center mt-1 text-xs text-gray-500 dark:text-gray-400">
                    <span className="mr-2">{bug.project}</span>
                    <span className="mr-2">{bug.module}</span>
                    <span>{bug.deadline}</span>
                  </div>
                </div>
                <div className="flex-shrink-0 ml-3">
                  <button 
                    className="text-xs bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded-full transition-colors"
                    onClick={() => handleViewBug(bug.id)}
                  >
                    查看
                  </button>
                </div>
              </motion.div>
            ))}
        </div>
      </motion.div>
      </div>
      
      {/* 工具栏 */}
      <div className="flex flex-wrap justify-between items-center gap-4 mb-6">
        <div className="flex items-center space-x-4 flex-wrap gap-2">
          <div className="relative">
            <input 
              type="text" 
              placeholder="搜索缺陷..." 
              className="py-2 pl-10 pr-4 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              onKeyDown={handleSearch}
            />
            <i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
          
          <select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="all">全部状态</option>
            <option value="待处理">待处理</option>
            <option value="处理中">处理中</option>
            <option value="已修复">已修复</option>
            <option value="已关闭">已关闭</option>
            <option value="已拒绝">已拒绝</option>
          </select>
          
          <select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={priorityFilter}
            onChange={(e) => setPriorityFilter(e.target.value)}
          >
            <option value="all">全部优先级</option>
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </select>
          
          <select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={severityFilter}
            onChange={(e) => setSeverityFilter(e.target.value)}
          >
            <option value="all">全部严重程度</option>
            <option value="严重">严重</option>
            <option value="中等">中等</option>
            <option value="轻微">轻微</option>
          </select>
          
          <select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={moduleFilter}
            onChange={(e) => setModuleFilter(e.target.value)}
          >
            <option value="all">全部模块</option>
            <option value="前端">前端</option>
            <option value="后端">后端</option>
            <option value="数据库">数据库</option>
            <option value="UI/UX">UI/UX</option>
            <option value="基础设施">基础设施</option>
          </select>
          
          <select 
            className="py-2 pl-3 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            value={assigneeFilter}
            onChange={(e) => setAssigneeFilter(e.target.value)}
          >
            <option value="all">全部负责人</option>
            {assignees.map(assignee => (
              <option key={assignee} value={assignee}>{assignee}</option>
            ))}
          </select>
        </div>
        
        <button 
          className="flex items-center bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-300"
          onClick={handleCreateBug}
        >
          <i className="fa-solid fa-plus mr-2"></i>
          提交缺陷
        </button>
      </div>
      
      {/* 缺陷列表 */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">缺陷编号</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider min-w-64">缺陷名称</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">所属项目</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-24">状态</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-24">优先级</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-24">严重程度</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-24">模块</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">提交人</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">负责人</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">进度</th>
                <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32">截止日期</th>
                <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-48">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {filteredBugs.map((bug) => (
                <motion.tr 
                  key={bug.id} 
                  className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3 }}
                >
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="font-mono text-sm text-gray-600 dark:text-gray-400 font-medium">{bug.code}</div>
                  </td>
                  <td className="px-6 py-4">
                    <div className={`font-medium ${bug.isOverdue ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`}>
                      {bug.title}
                      {bug.isOverdue && <span className="ml-2 text-red-500 dark:text-red-400"><i className="fa-solid fa-circle-exclamation"></i></span>}
                    </div>
                    <div className="flex items-center mt-1">
                      <TypeTag type={bug.type} />
                      {/* VersionTag组件暂时移除，因为bug数据中没有version字段 */}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded-full text-gray-800 dark:text-gray-300">{bug.project}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <StatusBadge status={bug.status} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <PriorityTag priority={bug.priority} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <SeverityTag severity={bug.severity} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <ModuleTag module={bug.module} />
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <UserAvatar name={bug.submitter} />
                      <span className="ml-2 text-sm text-gray-800 dark:text-gray-300">{bug.submitter}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <UserAvatar name={bug.assignee} />
                      <span className="ml-2 text-sm text-gray-800 dark:text-gray-300">{bug.assignee || '未分配'}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="flex items-center">
                      <ProgressBar progress={bug.progress} />
                      <span className="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">{bug.progress}%</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {bug.deadline}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <button 
                      className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-3"
                      onClick={() => handleViewBug(bug.id)}
                    >
                      <i className="fa-solid fa-eye mr-1"></i>查看
                    </button>
                    <button 
                      className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 mr-3"
                      onClick={() => handleEditBug(bug.id)}
                    >
                      <i className="fa-solid fa-pen-to-square mr-1"></i>编辑
                    </button>
                    {bug.status !== '已修复' && bug.status !== '已关闭' && (
                      <button 
                        className="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 mr-3"
                        onClick={() => handleMarkFixed(bug.id)}
                      >
                        <i className="fa-solid fa-check mr-1"></i>修复
                      </button>
                    )}
                    <button 
                      className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                      onClick={() => handleDeleteBug(bug.id)}
                    >
                      <i className="fa-solid fa-trash mr-1"></i>删除
                    </button>
                  </td>
                </motion.tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* 分页 */}
        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-600 flex justify-between items-center">
          <div className="text-sm text-gray-500 dark:text-gray-400">显示 1 至 {filteredBugs.length} 条，共 {bugs.length} 条</div>
          <div className="flex space-x-2">
            <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
              <i className="fa-solid fa-chevron-left text-xs"></i>
            </button>
            <button className="px-3 py-1 border border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-md">1</button>
            <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
              <i className="fa-solid fa-chevron-right text-xs"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}